<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="i1">
<input type="text" placeholder="请输入员工工资" id="i2">
<input type="text" placeholder="请输入员工职位" id="i3">
<button onclick="addEmp()">提交</button>
<div>
    <table border="1px" >
        <caption>员工表</caption>
        <tr>
            <td>姓名</td>
            <td>工资</td>
            <td>职位</td>
        </tr>
    </table>
</div>
<script>
    function addEmp(){
        //获得用户输入的数据
        let name = document.querySelector('#i1').value.trim()
        let salary = document.querySelector('#i2').value.trim()
        let job = document.querySelector('#i3').value.trim()
        //进行数据校验
        if (!name || !salary||!job){
            alert("请输入完整的员工信息")
        }
        //创建表格内的行
        let trE= document.createElement("tr")
        let nameE= document.createElement("td")
        let salaryE= document.createElement("td")
        let jobE= document.createElement("td")
        //将数据存入单元格
        nameE.innerHTML=name
        salaryE.innerHTML=salary
        jobE.innerHTML=job
        //将3个td存入tr
        trE.append(nameE,salaryE,jobE)
        //将tr存入表格
        let table = document.querySelector("table")
        table.append(trE)
        // 清空数据
        document.querySelector('#i1').value=''
        document.querySelector('#i2').value=''
        document.querySelector('#i3').value=''
    }
</script>
</body>
</html>